<template>
  <!-- <div class="face" element-loading-text="识别中..." v-loading='loading' customClass='el-icon-loading'>

    <h1 class="title">{{tack}}</h1>
    <div class="testTracking" v-show="video">
      <video id="video" preload autoplay loop muted v-show='Photo' playsinline></video>
      <canvas id="canvas" style="display:none" v-show='!Photo'></canvas>
      <div class='djs' v-show='isNum'>
         {{NumKs}}
      </div>
    </div>
    <div class="backgroundblack" v-show="backgroundblack"></div>
  </div> -->
  <div>
    <div class="bjbox" v-loading="loading" element-loading-text="识别中..." :style="{background:bigbackground}">
      <div  v-if="isUser" style="height: 100%; width: 100%;display: flex;flex-direction: column;align-items: center;">
        <h1 class="title">{{tack}}</h1>
        <div id="userBox" style="margin-top:10vh;overflow: hidden;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;">
          <video id="video" playsinline></video>
          <!-- <canvas id="canvas"></canvas> -->
        </div>
        <div style="font-size: 18px;margin-top: 3vh;" v-if="Number(outTime)">
          <p>请在规定时间内完成人脸验证</p>
          <p>剩余时间：<span style="font-size: 26px;color: #f00;">{{ outTime }}</span> 秒</p>
        </div>
        <div v-show='isNum' style="position: absolute;font-size: 220px;color:#fff;top: 10vh; height: 300px;display: flex;align-items: center;">
          {{NumKs}}
        </div>
      </div>
      <!-- <div v-if="!isUser" style="font-size: 14px;background: #fff;height: 50vh;margin-top: 15%;padding: 15px;position: relative;">
        
          <div style="font-size: 16px;color: #f00;">相机无权限或无摄像头,请尝试如下操作:</div>
          <div>· 当前访问地址必须为 https 协议；</div>
          <div>· 检查摄像头是否存在或正常工作；</div>
          <div>· 刷新页面后重试；</div>
          <div>· 在系统中检测当前浏览器的相机权限是否被禁用；</div>
          <div>· 如果依然不能体验，建议在微信中打开链接；</div>
          <div style="position: absolute;bottom: 30px;margin-left:-20px;width: 100%;display: flex;align-items: center;justify-content: center;">
            <van-button round type="info" class="info" @click="FNreload">点击重试</van-button>
          </div>
      </div> -->
      <div v-if="!isUser">
        <photo :comments="comments" :show="show" :hasFace="hasFace" :desFace="desFace"></photo>
      </div>
    </div>
  </div>
</template>

<script>
// require('build/tracking-min.js')
// require('build/data/face-min.js')
// require('build/data/mouth-min.js')
// require('examples/assets/stats.min.js')
// import axios from 'axios'
// import qs from 'qs'
import "./build/tracking.js";
import "./build/data/face-min.js";
import "./build/data/mouth-min.js";
import "./build/data/eye-min.js";
import { dataURLtoFile } from "@/utils/64batatoFile.js";
import { faceInit, faceupload, facecompare } from "@/api/admin.js";
import { mapGetters } from "vuex";
import {
  getapplyid,
  setisfacetime,
  delisfacetime,
  setisfacetimemkface,
  delisfacetimemkface,
  setisfacetimezxface,
  setisfacetimekjface,
  delisfacetimezxface,
  delisfacetimekjface,
  setisfacetimezsface,
  getUsername,
  getGZ,
} from "@/utils/auth.js";

import photo from './photo.vue'
export default {
  components:{photo},
  computed: {
    ...mapGetters(["userinfor",'nickname','initObj']),
  },
  props: {
    comments: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: false,
    },
    type:{
      type:String,
      default:'',
    }
  },
  data() {
    return {
      isUser:true,//是否存在摄像头权限


      // video: true,
      backgroundblack: true,
      isFace: false,
      tack: "未检测出人脸",
      NumKs: 2,
      objTime: Object,
      isNum: false,
      imgURl: "",
      Photo: true,
      isPhoto: false,
      loading: false,
      src: "",
      applyid: getapplyid(),
      hasFace: this.$route.query.hasFace ? this.$route.query.hasFace : "",
      desFace: this.$route.query.desFace ? this.$route.query.desFace : "",
      tracker: Object,
      cishu: 0, //验证次数

      title: "此功能需要人脸验证后才能使用,是否开始验证",
      isShowIos: navigator.userAgent.match(/(iPhone|iPod|ios|iOS|iPad)/i),
      showCamera: true,
      http:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),

      windowWidth: 0,
      windowHeight: 0,
      video: null,
      canvas: null,
      canvas2d: null,
      cameraCanvas: null,
      cameraCanvas2d: null,
      // exact: {
			// 	type: String,
			// 	default: 'environment' // environment 后摄像头  user 前摄像头
			// },
      all:false,

      bigbackground:'rgba(0,0,0,0.3)',
      backgroundList:['rgb(0,0,255)','rgb(255,255,0)','rgb(255,0,0)'],

      outTime:0,
      outTimeObj:null,
    };
  },
  // watch: {
  //   NumKs(val){
  //     if(val==0){
  //       this.objTime = null
  //     }
  //   }
  // },
  methods: {
    FNreload(){location.reload()},
    //判断照片角度是否正确
    // isNeedFixPhoto(file) {
    //   const EXIF = require("exif-js");
    //   let _this = this;
    //   // _this.$dialog.confirm({
    //   //   title:'提示',
    //   //   message:JSON.stringify(file),
    //   //   showCancelButton:true,
    //   // })
    //   return new Promise(function (resolve, reject) {
    //     if (EXIF) {
    //       EXIF.getData(file, function () {
    //         var Orientation = EXIF.getTag(this, "Orientation");
    //         // _this.$dig.error(JSON.stringify(EXIF.getAllTags(this)))

    //         if (Orientation && Orientation != 1) {
    //           //图片角度不正确
    //           resolve({ flag: true, Orientation: Orientation });
    //         } else {
    //           //不需处理直接上传
    //           resolve({ flag: false, Orientation: Orientation });
    //         }
    //       });
    //     } else {
    //       resolve(null);
    //     }
    //   });
    // },
    openCameraA() {
      var _this = this;
      // var isPhoto = false
      this.isPhoto=false
      this.bigbackground='rgba(0,0,0,0.3)'
      this.NumKs = 3
      this.tracker = new tracking.ObjectTracker("face");
      this.trackerTask = tracking.track("#video", this.tracker);
      this.tracker.setInitialScale(4);
      this.tracker.setStepSize(2);
      this.tracker.setEdgesDensity(0.1);
      this.tracker.on("track",this.faceFunction);
    },
    commitFace(event, canvas, video, context) {

      this.tack = "识别中...";
      this.isNum = false;
      // console.log(tracking);
      // tracking.TrackerTask.prototype.stop()
      this.tracker.removeListener("track",this.faceFunction)
      this.trackerTask.stop();
      this.video.pause()
      return setTimeout(()=>{
        event.data.forEach((rect) => {
          // context.font = "11px Helvetica";
          // context.strokeStyle = "#a64ceb";
          // context.strokeRect(rect.x, rect.y, this.windowWidth, this.windowHeight);
          // context.fillRect(30, 0, 200, 200)
          
          this.cameraCanvas2d.beginPath();
          this.cameraCanvas2d.stroke();
          // this.cameraCanvas2d.translate((this.cameraCanvas.width - this.cameraCanvas.width * -1) / 2, 0);
          this.cameraCanvas2d.scale(1,1)
          context.drawImage(video, 0,0, this.cameraCanvas.width, this.cameraCanvas.height);
          this.imgURl = canvas.toDataURL("image/png", 1);
          this.uploadImg(dataURLtoFile(this.imgURl, "老王"));
          // this.$lrz(this.imgURl, { quality: 0.8 }).then((res) => {
          //   // this.src = res.base64
          //   this.uploadImg(dataURLtoFile(res.base64, "老王"));
          // }).catch(err=>{
          //   console.log(err);
          // });
        });
        clearTimeout(this.commitFace)
      },10)
    },
    //人脸侦测功能
    faceFunction(event) {
      var _this = this;
      var video = this.video
      var canvas = this.cameraCanvas
      var context = this.cameraCanvas2d
      
      // if(result == "已识别到人脸"){
      //   console.log(result);
      //   return false
      // }else{
      // if(_this.isFace){
      //   return false
      // }else{
        if (event.data.length == 0 && !this.isPhoto) {
          _this.tack = "未检测出人脸";
          _this.NumKs = 3;
          _this.isNum = false;
        } else {
        // if(_this.tack!='已拍照'){

        // }
       
        // this.cameraCanvas.style.display='block'
        // this.video.style.display='none'
        if (!this.isPhoto) {
          this.isPhoto = true;
          _this.isNum = true;
          _this.tack = "请保持2-3秒不动";
          // _this.tack = '识别中...'
          _this.objTime = setInterval(() => {
            if (_this.NumKs == 0) {
              _this.bigbackground='rgba(0,0,0,0.3)'
              clearInterval(_this.objTime);
              clearInterval(this.outTimeObj)
              _this.loading = true;
              setTimeout(()=>{
                _this.commitFace(event, canvas, video, context);
              },1000)
            }else{
              _this.bigbackground= _this.backgroundList[_this.NumKs-1]
              _this.NumKs--;
            }
            _this.$forceUpdate()
          }, 1000);
        }
      }
    },
    //上传至服务器
    uploadImg(file) {
      let formData = new FormData();
      formData.append("image_file", file);
      formData.append("image_field", "face");
      faceupload(formData).then((res) => {
        if (res.code == 200) {
          if (this.desFace) {
            this.bottomPhoto(res.data.image_src);
          } else {
            this.cpFace(res.data.image_src);
          }
        } else {
          this.loading = false;
          this.$message.error("请稍后再试！");
        }
      });
    },
    // 底片存入
    bottomPhoto(src) {
      let obj = {
        applyid: this.applyid,
        face: src,
        
      };
      faceInit(obj).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$message.success("照片存入成功");
          // if(){
          //   setisfacetimekjface(obj)
          // }
          this.closeCamera()
          this.$router.push("/home");
        } else {
          this.$message.error(res.msg);
          this.src=''
          // this.open()
          this.video.play()
          this.openCameraA()
        }
      });
    },
    //人脸对比
    cpFace(src) {
      let type = this.$route.query.type || this.type
      // console.log(type);
      // return
      let obj = {};
      if (this.hasFace == "zsface") {
        obj = {
          applyid: this.applyid,
          face: src,
          type: "exam",
          verifyFace:JSON.parse(this.initObj.is_face)[getGZ()].zsface=='公安部识别'?1:0
        };
      } else {
        obj = {
          applyid: this.applyid,
          face: src,
          // face: 'https://qiye.shejiyuan.com/storage/userimage/qiye/20230608/20230608085609_64812729e8e44face.jpg',
          verifyFace:type&&JSON.parse(this.initObj.is_face)[getGZ()][type]=='公安部识别'?1:0
        };
      }
      // this.loading = true;
      facecompare(obj).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.closeCamera()
          this.$message.success("人脸验证成功");
          this.cishu=0
          if (this.hasFace == "openFaces") {
            setisfacetime(obj);
            setisfacetimemkface(obj);
            setisfacetimezxface(obj);
            setisfacetimekjface(obj);
          }
          if (this.hasFace == "mkface") {
            setisfacetimemkface(obj);
            delisfacetimezxface();
            delisfacetimekjface();
            delisfacetime();
          }
          if (this.hasFace == "zxface") {
            setisfacetimezxface(obj);
            delisfacetimemkface();
            delisfacetimekjface();
            delisfacetime();
          }
          if (this.hasFace == "kjface") {
            setisfacetimekjface(obj);
            delisfacetimemkface();
            delisfacetimezxface();
            delisfacetime();
          }
          if (this.hasFace == "zsface") {
            setisfacetimezsface(obj);
          }
          if (this.comments) {
            this.$emit("update:show", false);
            
          } else {
            this.$router.push("/home");
          }
        } else {
          this.cishu++
          // this.$message.error("人脸验证失败,请重新验证!");
          if (this.http.indexOf("putai") != -1 && this.hasFace != "zsface") {
            this.$message.error("人脸验证失败,请重新验证");
          } else if (
            this.http.indexOf("putai") != -1 &&
            this.hasFace == "zsface"
          ) {

          } else if (this.http.indexOf("putai") == -1) {
            this.$message.error("人脸验证失败,请重新验证");
          }
          if(this.cishu>=3){
            this.$router.push("/home");
          }
          this.src=null
          this.video.play()
          this.openCameraA()
          // if (this.comments ) {
          // } else {
            
          //   this.src = null;
          //   this.video.play()
          //   this.openCameraA()
          // }
          const that = this
          if(this.outTime!=0){
            this.outTimeObj=setInterval(() => {
              this.outTime--
              if(this.outTime==0){
                clearInterval(this.objTime);
                clearInterval(this.outTimeObj)
                this.video.srcObject = null
                this.$toast.fail({
                  message:'未在规定时间内完成验证，将自动返回',
                  duration:4000,
                  onClose(){
                    if (that.comments ) {
                      that.src=null
                      that.$router.push("/home");
                    }else{
                      that.goBack()
                    }
                  }
                })
              }
            }, 1000);
          }
        }
      });
    },
    async open() {
      // var video = document.getElementById('video');
      // var canvas = document.getElementById('canvas');
      // var context = canvas.getContext('2d');
      // navigator.mediaDevices.getUserMedia({video: true,audio:false}).then(stream=>{
      //   console.log(stream,'1211151511')
      //   this.$nextTick(() => {
      //     video.srcObject = stream;//that.video是video标签节点，请自行获取节点，updated周期里可以拿到！
      //     video.play();
      //   });
      // })
      // console.log(123);
      // setisfacetimekjface({applyid: this.applyid,
      //     face: '',});
      if(origin.indexOf('https') === -1) return this.isUser=false
      await navigator.mediaDevices.enumerateDevices().then((devices) => {
        this.mediaList = devices
        // console.log(devices.filter(item=>item.label), '-----enumerateDevices------');
      });
				// this.isShowImgCard=false
        let a = document.documentElement.clientWidth || document.body.clientWidth
        this.src = ''
				this.windowWidth = a
				this.windowHeight = this.windowWidth * 1.28
				this.$nextTick(() => {
					let userBox = document.getElementById('userBox')
					this.video = document.getElementById('video')
          // playsinline
          // this.video.id='video'
          userBox.style.width = a*0.8 + 'px'
          userBox.style.height = userBox.style.width
					this.video.width = this.windowWidth
					this.video.height = this.windowHeight
          // this.video.className = 'degFrom'
          this.video.playsinline=true
          this.video.pause()
          // transform: rotateY(180deg);
					this.video.style="height:auto;transform: rotateY(180deg);"
					// this.cameraCanvas = document.getElementById('canvas')
          const canvas = document.createElement('canvas')
          canvas.id='canvas'
          userBox.appendChild(canvas)
          this.cameraCanvas = canvas
          
          // console.log(this.cameraCanvas2d,'16666');
          // var time = setInterval(()=>{
           
          //   if(this.video.videoWidth){
              // console.log(this.video.videoWidth,9999);
          //     // this.video.removeEventListener('play',playerReader)
          //     clearInterval(time)
             
          //     console.log(this.cameraCanvas2d,'123');
          //     // this.openCameraA()
          //   } 
          // },300)
					this.openScan()
				})
    },
    goBack() {
      if (this.comments) {
        this.$emit("update:show", false);
      } else {
        this.$router.go(-1);
      }
    },
    closeCamera(){
      this.video.srcObject.getTracks().forEach(function(track) {
        if (track.readyState == 'live') {
            track.stop();
        }
    });
    },
    //照片旋转
    // removePicExif(file, Orientation) {
    //   return new Promise((reslove) => {
    //     if (file) {
    //       let reader = new FileReader();
    //       reader.readAsDataURL(file);
    //       let image = new Image();
    //       reader.onload = function (ev) {
    //         image.src = ev.target.result;
    //         image.onload = function () {
    //           const ctxWidth = this.width;
    //           const ctxHeight = this.height;
    //           const canvas = document.createElement("canvas");
    //           const ctx = canvas.getContext("2d");
    //           canvas.width = ctxWidth;
    //           canvas.height = ctxHeight;
    //           if (Orientation && Orientation != 1) {
    //             switch (Orientation) {
    //               case 6: // 旋转90度
    //                 canvas.width = ctxHeight;
    //                 canvas.height = ctxWidth;
    //                 ctx.rotate(Math.PI / 2);
    //                 ctx.drawImage(this, 0, -ctxHeight, ctxWidth, ctxHeight);
    //                 break;
    //               case 3: // 旋转180度
    //                 canvas.width = ctxWidth;
    //                 canvas.height = ctxHeight;
    //                 ctx.rotate(Math.PI);
    //                 ctx.drawImage(
    //                   this,
    //                   -ctxWidth,
    //                   -ctxHeight,
    //                   ctxWidth,
    //                   ctxHeight
    //                 );
    //                 break;
    //               case 8: // 旋转-90度
    //                 canvas.width = ctxHeight;
    //                 canvas.height = ctxWidth;
    //                 ctx.rotate((3 * Math.PI) / 2);
    //                 ctx.drawImage(this, -ctxWidth, 0, ctxWidth, ctxHeight);
    //                 break;
    //             }
    //           } else {
    //             ctx.drawImage(this, 0, 0, ctxWidth, ctxHeight);
    //           }
    //           canvas.toBlob((blob) => {
    //             const newFile = new File([blob], file.name, {
    //               type: "image/jpeg",
    //               lastModified: Date.now(),
    //             });
    //             reslove(newFile);
    //           });
    //         };
    //       };
    //     }
    //   });
    // },
    //打开相机
    // async openCamera(data) {
    //   // if(getUsername() == '410881198702173016'){
    //   //   alert(JSON.stringify(data.target.files))
    //   // }
    //   if (
    //     data.target.files.length == 0 &&
    //     getUsername() != "410881198702173016"
    //   ) {
    //     return;
    //   }
    //   this.loading = true;
    //   const result = await this.isNeedFixPhoto(data.target.files[0]);
    //   let Orientation = 1;
    //   // alert(result)
    //   // this.$dialog.confirm({
    //   //   title:'提示',
    //   //   message:navigator.userAgent
    //   //     .match(/iPhone OS .*?(?= )/)[0]
    //   //     .split("_")[0]
    //   //     .split(" ")[2],
    //   //   showCancelButton:true,
    //   // })
    //   // return
    //   if (
    //     result &&
    //     result.flag &&
    //     navigator.userAgent.match(/iPhone OS .*?(?= )/) &&
    //     navigator.userAgent
    //       .match(/iPhone OS .*?(?= )/)[0]
    //       .split("_")[0]
    //       .split(" ")[2] <= 11
    //   ) {
    //     Orientation = result.Orientation ? result.Orientation : 1;
    //   } else {
    //     Orientation = 1;
    //   }
    //   // return
    //   this.$lrz(await this.removePicExif(data.target.files[0], Orientation), {
    //     quality: 0.5,
    //   }).then((res) => {
    //     this.loading = false;
    //     this.src = res.base64;
    //     this.uploadImg(dataURLtoFile(res.base64, res.origin.name));
    //   });
    //   // this.uploadImg(await this.removePicExif(data.target.files[0],Orientation))
    // },
    
    openScan() {
        this.isUser=true
				let width = 768 * 4
				let height = 1024 * 4
        let deviceId=''
				this.mediaList.map(item=>{
					if(item.label){
						deviceId=item.deviceId
					}
				})
        // environment 后摄像头  user 前摄像头
				const videoParam = {
					audio: false,
					video: {
						facingMode: 'user',
						width,
						height,
            deviceId
					}
				}
        
				navigator.mediaDevices.getUserMedia(videoParam).then((stream) => {
					this.video.srcObject = stream
					this.video.setAttribute('playsinline', true)
					this.video.setAttribute('webkit-playsinline', true)
					this.video.play()
          this.cameraCanvas.width =500
          this.cameraCanvas.height = 600
          this.cameraCanvas.style = `display:none;height:${600}px;width:${500}px;`
          this.cameraCanvas2d = this.cameraCanvas.getContext('2d')
          if(this.isUser){
            if(!this.desFace){
              let facetimeout = JSON.parse(this.initObj.setting).faceOutTime
              this.outTime = facetimeout?facetimeout * 60:0
              const that = this
              if(this.outTime&&this.outTime!=0){
                this.outTimeObj=setInterval(() => {
                  this.outTime--
                  if(this.outTime==0){
                    clearInterval(this.objTime);
                    clearInterval(this.outTimeObj)
                    this.video.srcObject = null
                    this.$toast.fail({
                      message:'未在规定时间内完成验证，将自动返回',
                      duration:4000,
                      onClose(){
                        if (that.comments ) {
                          that.src=null
                          that.$router.push("/home");
                        }else{
                          that.goBack()
                        }
                      }
                    })
                  }
                }, 1000);
              }
            }
          }
          // console.log(this.cameraCanvas2d);
          this.openCameraA()



          // var playerReader = ()=>{
          //   // console.log(this.cameraCanvas,'6666');
          //  if(this.video.videoHeight){
          //   this.video.removeEventListener('timeupdate',playerReader)
          //   console.log(this.video.videoHeight,this.video.videoWidth);
            
          //  }
          // }
          // this.video.addEventListener('timeupdate',playerReader)

          // console.log(this.cameraCanvas.width);
          
          
          // this.cameraCanvas2d.translate(this.cameraCanvas.width, 0);
          

					// this.track = stream.getVideoTracks()[0];
					// setTimeout(() => {
					// 	this.isUseTorch = this.track.getCapabilities().torch || null
					// }, 500)
				}).catch((err) => {
					// this.$toast.fail("设备无摄像头或不支持");
          this.isUser=false
					console.log('设备不支持', err);
					// this.isUse = false
				})
			},
  },
  mounted() {
    // console.log(this)
    // this.openCamera()
    this.open()
    
    // setTimeout(()=>{
    //     this.$refs.camera.click();
    // },2000)
  },
  destroyed() {
    // this.video.srcObject.getTracks()[0].stop()
    if(this.isUser){
      clearInterval(this.outTimeObj)
      this.video.srcObject = null
    }
    // 停止侦测
    // this.trackerTask.stop('track')
    // 关闭摄像头
    // this.trackerTask.closeCamera()
  },
  created() {
    if (this.desFace) {
      this.title = "初次使用人脸识别，请录入头像信息";
    } else {
      this.title = "此功能需要人脸验证后才能使用，是否开始验证";
    }
    if (this.comments) {
      this.title = "此功能需要人脸验证后才能使用，是否开始验证";
    }
  },
};
</script>

<style lang="scss" scoped>
.face {
  height: 100%;
  width: 100%;
  position: fixed;
  // position: relative;
  // background: url(../../assets/ground.jpg);
  background-size: 100% 100%;
  // color:#fff;
  z-index: 10;
}
.result {
  position: absolute;
  font-size: 0.05rem;
  bottom: 3%;
  text-align: center;
  width: 100%;
  color: #fff;
}
.opacity {
  opacity: 0;
}
.testTracking {
  > * {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }
  video {
    position: absolute;
    width: 20.2rem;
    height: 20.2rem;
    top: 10.5%;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    transform: rotateY(180deg);
    z-index: 10;
  }
  // img{
  //   position: absolute;
  //   width:20.2rem;
  //   height: 20.2rem;
  //   top:10.5%;
  //   left: 0;
  //   right: 0;
  //   margin: auto;
  //   padding:0;
  //   border-radius: 50%;
  // }
  canvas {
    position: absolute;
    width: 20.2rem;
    height: 20.2rem;
    top: 10.5%;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    transform: rotateY(180deg);
    /* border-radius: 50%; */
    z-index: 10;
  }
  .buttonDiv {
    bottom: 10px;
  }
}
.testTracking {
  ::v-deep {
    #stats {
      display: none;
    }
  }
}
.testTracking {
  ::v-deep {
    #fps {
      display: none;
    }
  }
}
.testTracking {
  z-index: 10;
  ::v-deep {
    element.style {
      // padding: 0px 0px 3px 3px;
      text-align: left;
      background-color: rgb(0, 34, 0);
      display: none;
    }
  }
}
.log {
  display: block;
  height: 1.2rem;
  width: 3.8rem;
  position: absolute;
  left: 2%;
  top: 4.5%;
}
h1 {
  font-size: 1.8rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  // background:linear-gradient(0deg,rgba(255,255,255,1) 0%, rgba(219,219,219,1) 24.1943359375%, rgba(255,255,255,1) 46.4111328125%, rgba(227,227,226,1) 65.673828125%, rgba(255,255,255,1) 88.1591796875%);
  -webkit-background-clip: text;
  // -webkit-text-fill-color:transparent;
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 3vh;
  color: #000;
  z-index: 10;
  // margin-top:10%;
}
.prompt {
  font-size: 0.7rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(219, 219, 219, 1) 24.1943359375%,
    rgba(255, 255, 255, 1) 46.4111328125%,
    rgba(227, 227, 226, 1) 65.673828125%,
    rgba(255, 255, 255, 1) 88.1591796875%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 4.18rem;
}
.inputbox {
  width: 9.4rem;
  height: 5.5rem;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: rgba(242, 242, 242, 1);
  border-radius: 0.2rem;
  z-index: 100;
}
.inputbox p {
  width: 100%;
  height: 15%;
  position: absolute;
  font-size: 0.6rem;
  left: 0;
  top: 0.6rem;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.inputbox .errorp {
  position: absolute;
  left: 0;
  top: 30%;
  bottom: 0;
  right: 0;
  margin: 0 auto;
}
.inputbox input {
  width: 85%;
  height: 1.2rem;
  display: block;
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: rgba(229, 229, 229, 1);
  border-radius: 0.62rem;
  border: none;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(95, 103, 115, 1);
  // background: red;
}
.inputbox .inputbutton {
  height: 21%;
  width: 100%;
  border-top: 1px solid rgba(229, 229, 229, 1);
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}
.inputbox .clearinput {
  font-size: 0.24rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(150, 158, 171, 1);
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  position: absolute;
  left: 84%;
  top: 2.3rem;
  bottom: 0;
  // right: 0;
  margin: 0 auto;
}
.inputbox .inputbutton button {
  outline: none;
  height: 100%;
  width: 100%;
  border: none;
  background: rgba(242, 242, 242, 1);
  border-right: 1px solid rgba(229, 229, 229, 1);
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(49, 51, 55, 1);
  font-size: 0.5rem;
  border-radius: 0 0 0.2rem 0.2rem;
}
.inputbox .inputbutton .cancel {
  color: rgba(150, 158, 171, 1);
}
.inputbox .inputbutton .errorinputbutton {
  width: 100%;
  border: none;
}
.backgroundblack {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #fff;
  z-index: 5;
  // opacity:0.5;
}
#result[data-v-15b437a0] {
  // opacity: 0;
}
.djs {
  color: #fff;
  position: absolute;
  width: 20.2rem;
  height: 20.2rem;
  top: 10.5%;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  // opacity: 0;
  font-size: 10rem;
  z-index: 10;
}

.bjbox {
  height: 100vh;
  width: 100vw;
  // overflow: hidden;
  background: rgba($color: #000000, $alpha: 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  .aaaaa{
    border-radius: 50%;
    height: 250px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .vivwBox{
    border-radius: 50%;
    height: 250px;
    width: 250px;
    border: 1px solid #f00;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}
.tsBox {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  width: 90vw;
  margin-top: 15%;
  border-radius: 12px;
  overflow: hidden;
  &::before {
    content: "人脸识别";
    font-size: 1.5rem;
  }
}
.camera {
  opacity: 0;
  width: 100%;
  height: 1.87rem;
  position: absolute;
  z-index: 2;
  // display: none;
}
.cameraBox {
  position: relative;
  display: inline-block;
  width: 5.62rem;
  margin-left: 0.75rem;
  height: 2.2rem;
  .info {
    position: absolute;
    left: 0;
    z-index: 1;
  }
}
.van-button {
  height: 2rem;
  width: 6rem;
  // width:100%;
}
.van-button--normal {
  padding: 0 !important;
}
// img {
//   width: 9.37rem;
//   height: 9.37rem;
// }
.degFrom{
  transform: rotate3d(360deg);
}
#video::-webkit-media-controls-fullscreen-button {
		display: none;
}
/* 隐藏video 播放按钮 */
#video::-webkit-media-controls-play-button {
		display: none;
}
/* 隐藏video 进度条 */
#video::-webkit-media-controls-timeline {
		display: none;
}
/* 隐藏video 观看的当前时间 */
#video::-webkit-media-controls-current-time-display{
		display: none;            
}
/* 隐藏video 剩余时间 */
#video::-webkit-media-controls-time-remaining-display {
		display: none;            
}
/* 隐藏video 音量按钮 */
#video::-webkit-media-controls-mute-button {
		display: none;            
}
#video::-webkit-media-controls-toggle-closed-captions-button {
		display: none;            
}
/* 隐藏video 音量的控制条 */
#video::-webkit-media-controls-volume-slider {
		display: none;            
}
/* 隐藏video 所有控件 */
#video::-webkit-media-controls-enclosure{ 
		display: none;
}
</style>
